<template>
  <div>
    <div class="djxx" >
      <div style="text-align: center;" >
        <img  class="djimg" src="../../../static/img/dj.png" />
      </div>
      <div   style=" display: flex;justify-content: space-between;margin: 4px auto;">
        <div style="width: 32%;background: #FFFFFF;">
          <div class="djdis" v-if="article[2]" >
            <span >{{article[2].name}}</span>
            <span class="djgeng" @click="more(2)">更多 >></span>
          </div>
          <div class="djxx-list"  v-if="article[2]">
            <div class="djfiex"  v-for="(item,index) in article[2].articleVOList">
              <div class="status-point"></div>
              <div @click="sava(item)" class="djlist">{{item.title}}</div>
            </div>
          </div>
        </div>

        <div style="width: 32%;background: #FFFFFF;">
          <div class="djdis" v-if="article[0]" >
            <span v-if="article[0]">{{article[0].name}}</span>
            <span class="djgeng" @click="more(0)">更多 >></span>
          </div>
          <div class="djxx-list"   v-if="article[0]">
            <div class="djfiex" v-for="(item,index) in article[0].articleVOList">
              <div class="status-point"></div>
              <div @click="sava(item)"  class="djlist">{{item.title}}</div>
            </div>
          </div>
        </div>
        <div style="width: 32%;background: #FFFFFF;">
          <div class="djdis" v-if="article[1]">
            <span >{{article[1].name}}</span>
            <span class="djgeng" @click="more(1)">更多 >></span>
          </div>
          <div class="djxx-list" v-if="article[1]">
            <div class="djfiex"  v-for="(item,index) in article[1].articleVOList">
              <div class="status-point"></div>
              <div @click="sava(item)" class="djlist">{{item.title}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="djxx-bottom" v-if="article[3]">
        <div class="djdis" >
          <span>{{article[3].name}}</span>
          <span class="djgeng" @click="more(3)">更多 >></span>
        </div>
        <vue-scroll :data="article[3].articleVOList" :class-option="optionLeft" class="seamless-warp2">
        	<div class="imgBox profes animate__animated fadeInRightBig" >
        		<div class="imgDiv " v-for="(item,index) in article[3].articleVOList" :key="index">
        			<img @click="sava(item)" style="width: 100%;height: 100%;"  :src="API + item.coverImage" />
        		</div>
        	</div>
        </vue-scroll>
      </div>
    </div>
    <bot-tom ></bot-tom>
  </div>
</template>

<script>
  import vueScroll from "vue-seamless-scroll";
  import axios from 'axios'
  import botTom from '@/layout/components/bottom.vue'
  export default {
    components: {
    	vueScroll,
      botTom
    },
    data() {
      return {
        article:{},
        devic:'',
        devicwidth:''
      }
    },
    computed: {
    	optionLeft () {
    		return {
    				direction: 2,
    				limitMoveNum: 2
    			}
    	}
    },
    created() {

    },
    mounted() {
      this.selectMasseslList()
      this.API =  process.env.KERNEL
      this.devic = localStorage.getItem('devicwidth')
      this.devicwidth = Number(localStorage.getItem('devicwidth') ) *2 + 'px'
      console.log('devicwidth',this.devicwidth)

    },
    methods:{
      more(i){
        this.$store.state.print.urlName = '群众路线专题'
        localStorage.setItem('urlName','群众路线专题')
        this.$router.push({path:'/qun/index',query:{static:i}})
      },
      sava(item){
        this.$router.push({path:'/detail/index',query:{id:item.articleId}})
        this.$store.state.print.ksName = ' '
        this.$store.state.print.urlName = '群众路线专题'
        localStorage.setItem('urlName','群众路线专题')

      },
      selectMasseslList(){
        this.$api.selectMasseslList().then(res => {
          if(res.code == 200){
            this.article = res.data
          }
        })
      }
    }
  }
</script>

<style scoped="scoped">
  .imgDiv {
    width: 350px;
    height: 250px;
    margin-right: 15px;
  }
  .seamless-warp2 {
  	overflow: hidden;
  	width: 100%;
  	height: 250px;
  }
  .djxx-bottom{
    margin-top: 20px;
    /* width: 950px; */
    margin-bottom: 50px;
  }
  .status-point {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color:#333333;
}
.djxx-list{
  box-shadow: 0px 3px 3px 0 #c3c3c3;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  padding:5px 20px;
}
.djlist{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 10px;
  width: 90%;
  cursor: pointer;
}
.djfiex{
  display: flex;
  align-items: center;
  padding: 5px 0;
  color: rgba(0,0,0,1);
  font-size: 16px;
  color: #666666;
}

  .djdis{
    display: flex;
    justify-content: space-between;
    color: #FFFFFF;
    background: #ad2414;
    font-size: 18px;
    padding: 15px 20px;
  }
  .djgeng{
    cursor: pointer;
  }
  .djxx{
    /* min-width: 950px; */
    width: 1200px;
    position: relative;
    margin: 0 auto;
    background: #FFFFFF;
    padding-bottom: 20px;
  }
  body{
    background: #FFFFFF;
  }
  .djimg{
    width:1200px;
  }
  .profes{
  	display: flex;
  	flex-direction: initial;
  }
</style>
